<template>
  <el-container>
    <!-- 头部搜索框 -->
    <el-header>
      <div class="header" style="margin:20px">
        <el-col :span="8" :offset="7">
          <div class="head-container">
            <el-input
              v-model="queryParams.goodsName"
              placeholder="请输入商品名称"
              clearable
              prefix-icon="el-icon-search"
              @keyup.enter.native="handleQuery">
              <el-button slot="append" style="background-color:#3d658f;color:white" @click="handleQuery">搜索</el-button>
            </el-input>
          </div>
        </el-col>
      </div>
    </el-header>

    <!-- 主体 -->
    <el-main>
      <!-- 品牌等信息列表 -->
      <div style="padding:10px;margin-bottom:10px">
        <el-form>
          <div>
            <div class="layoutone">
              <strong style="color:#606266;margin-right:15px">品牌：</strong>
              <el-button type="text" id="btn" v-for="item in brandItem" :key="item.brandId" @click="brandClick(item.brandId)">
                <span>{{ item.brandName }}</span></el-button>
            </div>
            <div class="layoutonee">
              <strong style="color:#606266;margin-right:15px">类别：</strong>
              <el-button type="text" v-for="item in classifyItem" :key="item.classifyId" @click="classifyOnclick(item.classifyId)">
                <span>{{ item.classifyName }}</span>
              </el-button>
            </div>
          </div>
          <div class="layouttwo">
            <el-row>
              <el-col :span="5">
                <el-form-item label="排序：">
                  <el-button size="mini" @click="newGoods">最新发布</el-button>
                  <el-button size="mini" style="margin-left:20px" @click="hotGoods">最热排序</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="1">
                <el-form-item label="价格选择：">
                  <el-input size="mini" style="width:60px;" placeholder="¥"></el-input>
                  <span>-</span>
                  <el-input size="mini" style="width:60px" placeholder="¥"></el-input>
                  <el-button style="margin-left:10px" plain size="mini">确定</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>

      <!-- 商品信息列表 -->

      <el-row style="width: 1500px">
        <el-col :span="4" :offset="1" v-for="item in goodsList" :key="item.goodsId">
            <el-card :body-style="{ padding: '2px' }" shadow="hover" class="box-card">
              <el-button @click="goTo(item.goodsId)">
                <img :src="item.mainImgUrl" class="image">
              </el-button>
              <div style="padding: 15px;">
                <span class="textr">{{ item.goodsName }}</span>
                <div class="bottom">
                  <span style="color:red;font-size:22px">¥{{ (item.goodsPrice/100*(item.goodsDiscount/100)).toFixed(2) }}</span>
                  <span style="color:#929292;margin-left:10px;text-decoration:line-through;font-size:13px"
                  v-if="item.goodsDiscount !== 100">¥{{ (item.goodsPrice/100).toFixed(2) }}</span>
                  <el-button type="danger" class="button" circle icon="el-icon-shopping-cart-1" @click="addCart(item.goodsId)"></el-button>
                </div>
              </div>
            </el-card>
        </el-col>
      </el-row>


      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />


    </el-main>

    <!-- 底部信息 -->
    <el-footer>
      <div class="footer" style="text-align: center;">
        <span>Copyright © 2021 cqjtu pjy&zq.</span>
      </div>
    </el-footer>

  </el-container>
</template>

<script>
import { listHome, listBrand, listClassify } from '@/api/home/homes'
import { addCart } from '@/api/shop/shoppingcart'

export default {
  name: 'Index',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格参数
      form: {},
      goodsList: [],
      //类别展示
      classifyItem: [],
      //品牌展示
      brandItem: [],
      loading: true,
      imgUrl: [],

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        goodsName: "",
        brandId: undefined,
        classifyId: undefined,
        priceStart: undefined,
        priceEnd: undefined,
        orderType: 2,
      },
    }
  },
  created() {
    this.getList()
    this.getHomeClassify()
    this.getHomeBrand()
  },
  methods: {
    getList() {
      this.loading = true
      listHome(this.queryParams).then(response => {
          this.goodsList = response.rows
          this.imgUrl = response.rows.mainImgUrl;
          this.total = response.total
          this.loading = false
        }
      )
    },
    getHomeBrand() {
      listBrand(this.queryParams.goodsName).then(response => {
        this.brandItem = response.data
      })
    },
    //品牌搜索
    brandClick(key) {
      this.queryParams.pageNum = 1
      this.queryParams.brandId = key;
      this.getList();
      this.queryParams.brandId = undefined;
      console.log(key)
    },
    //分类搜索
    classifyOnclick(key) {
      this.queryParams.pageNum = 1
      this.queryParams.classifyId = key;
      this.getList();
      this.queryParams.classifyId = undefined;
      console.log(key)
    },
    getHomeClassify() {
      listClassify(this.queryParams.goodsName).then(response => {
        this.classifyItem = response.data
      })
    },
    //跳转商品详情页
    goTo(goodsId) {
      this.$router.push({path:'/shopdetail',query: { goods_id: goodsId }});
    },
    newGoods() {
      this.queryParams.orderType = 2
      this.getList()
    },
    hotGoods() {
      this.queryParams.orderType = 1
      this.getList()
      this.queryParams.orderType = 2
    },
    //添加进购物车
    addCart(goodsId) {
      addCart(goodsId).then(response => {
        if (response.code === 200) {
          this.msgSuccess('添加成功')
        }
      })
    },
    //搜索框
    handleQuery() {
      this.loading = true
      this.queryParams.pageNum = 1
      this.getList()
      this.getHomeClassify()
      this.getHomeBrand()
    },
  }
}
</script>

<style lang="less" scoped>
.layoutone {
  padding: 15px 0 0 15px;
  height: 80px;
  background-color: #f8f9ff;
  border-top: solid 1px #dadee6;
  border-bottom: solid 1px #dadee6;
}

.layoutonee {
  padding: 15px 0 0 15px;
  height: 60px;
  background-color: #f8f9ff;
  border-bottom: solid 1px #dadee6;
}

.layouttwo {
  margin: 10px 0 0 45px;
  background-color: #eff1f8;
  padding: 15px 0 0 15px;
  height: 65px;
  border-top: solid 1px #dadee6;
  border-bottom: solid 1px #dadee6;
}

.box-card {
  width: 240px;
  height: 340px;
  margin:0 30px 20px 0;
  display: inline-block;
}
.textr {
  width:200px;
  display: inline-block;
  overflow:hidden; //超出的文本隐藏
  text-overflow:ellipsis; //溢出用省略号显示
  white-space:nowrap; //溢出不换行
}
.bottom {
  margin-top: 15px;
}

.button {
  padding: 8px;
  float: right;
}

.image {
  width: 100%;
  height: 210px;
  display: block;
}

.el-scrollbar {
  height: 100%;
}

.el-scrollbar__wrap {
  overflow: scroll;
  width: 110%;
  height: 120%;
}

#btn {
  border: solid 1px #dadee6;
  border-radius: 0px;
  background: white;
  width: 80px;
  height: 50px;
}
.el-main {
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
}
</style>
